<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="订单总数"
        :value="stats.totalOrders"
        icon="Document"
        color="#1890ff"
        :trend="stats.amountTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="待处理订单"
        :value="stats.pendingOrders"
        icon="Clock"
        color="#fa8c16"
        :trend="stats.avgTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="已完成订单"
        :value="stats.completedOrders"
        icon="Check"
        color="#52c41a"
        :trend="stats.completionTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="今日新增"
        :value="0"
        icon="Plus"
        color="#722ed1"
        :trend="stats.invoiceTrend"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import StatCard from '@/components/StatCard.vue'

// 定义组件属性
interface Stats {
  totalOrders: number
  pendingOrders: number
  completedOrders: number
  problemOrders: number
  monthlyAmount: number
  avgOrderAmount: number
  completionRate: number
  uninvoicedOrders: number
  amountTrend: number
  avgTrend: number
  completionTrend: number
  invoiceTrend: number
}

interface Props {
  stats: Stats
}

const props = defineProps<Props>()
</script>

<style scoped lang="scss">
.stats-row {
  margin-bottom: 20px;
}
</style>